<template>
  <div class="tabs">
    <ul>
      <li class="flex flex-align-c">
        <div class="label tr no-select">分类：</div>
        <div class="content">
          <template v-for="tag in classifyTags">
            <a-checkable-tag
              :key="tag.id"
              :checked="selectedClassifyTags.indexOf(tag.id) > -1"
              @change="
                checked =>
                  handleChange(tag, checked, 'selectedClassifyTags', 'id')
              "
            >
              <span class="cursor-pointer no-select"
                >{{ tag.categoryName }}
              </span>
            </a-checkable-tag>
          </template>
        </div>
      </li>
      <li class="flex flex-align-c">
        <div class="label tr no-select">订单状态：</div>
        <div class="content">
          <template v-for="tag in orderStatusTags">
            <a-checkable-tag
              :key="tag.value"
              :checked="selectedStatusTags.indexOf(tag.value) > -1"
              @change="
                checked =>
                  orderStatusChange(tag, checked, 'selectedStatusTags', 'value')
              "
            >
              <span class="cursor-pointer no-select">{{ tag.desc }}</span>
            </a-checkable-tag>
          </template>
        </div>
      </li>
      <li class="flex flex-align-c">
        <div class="label tr no-select">日期：</div>
        <div class="content">
          <a-range-picker
            @change="
              (date, dateString) => {
                dateChange(date, dateString, 'change');
              }
            "
            @ok="
              (date, dateString) => {
                dateChange(date, dateString, 'ok');
              }
            "
            :showTime="{
              defaultValue: [
                momentTime('00:00:00', 'HH:mm:ss'),
                momentTime('23:59:59', 'HH:mm:ss')
              ]
            }"
            valueFormat="x"
          />
        </div>
      </li>
    </ul>
    <div class="powerSearch">
      <!-- <c-button type="link" @click="powerSearchVisible = true"
        >高级搜索</c-button
      > -->
    </div>
    <c-modal
      v-model="powerSearchVisible"
      title="高级搜索"
      :width="800"
      destroyOnClose
    >
      <Search />
    </c-modal>
  </div>
</template>

<script>
import moment from "moment";
import { mapState } from "vuex";
import orderDict from "@/dict/order";
import Search from "./search";

export default {
  components: {
    Search
  },
  data() {
    return {
      selectedClassifyTags: [0],
      selectedStatusTags: [0],
      powerSearchVisible: false,
      dateOpen: false // 日期筛选是否打开
    };
  },
  computed: {
    ...mapState(["resource"]),
    // 获取当前订单类型所有的状态
    orderStatusTags() {
      let status =
        this.$route.name.indexOf("Pricing") !== -1 ||
        this.$route.name.indexOf("pricing") !== -1
          ? orderDict.pricingStatus
          : orderDict.confirmStatus;
      // 不显示的状态
      let eliminatedStatus = [
        orderDict.pricingStatus.revoke.value, // 买家申请撤单中
        orderDict.pricingStatus.applyModifyPrice.value, // 买家申请改价
        orderDict.pricingStatus.sellerClose.value, // 卖家申请关闭中
        orderDict.pricingStatus.buyerClose.value, // 买家申请关闭中
        orderDict.pricingStatus.buyerTally.value, // 已挂单-申请结单中
        orderDict.pricingStatus.modifyGoods.value, // 待生成合同-修改商品
        orderDict.pricingStatus.modifyPremium.value, // 待生成合同-修改升贴水
        orderDict.pricingStatus.sellerModifyBasePrice.value, // 待生成合同-修改价格(基价)
        orderDict.pricingStatus.sellerModifyFirmPrice.value // 待生成合同-修改价格(含税单价)
      ];
      let res = [];
      for (const key in status) {
        if (eliminatedStatus.indexOf(status[key].value) === -1) {
          res.push(status[key]);
        }
      }
      res.unshift({ desc: "全部", value: 0 });
      return res;
    },
    // 获取所有分类
    classifyTags() {
      let res = JSON.parse(JSON.stringify(this.resource.categoryRootMenu));
      res.unshift({
        categoryName: "全部",
        id: 0
      });
      return res;
    }
  },
  watch: {
    $route() {
      // let values = this.orderStatusTags.map(i=>i.value)
      // if(values.indexOf(this.selectedStatusTags[0])===-1) {
      //   this.selectedStatusTags = [0]
      // }
      // this.selectedClassifyTags = [0],
      // this.selectedStatusTags = [0],
      // this.powerSearchVisible = false
    }
  },
  methods: {
    moment,
    momentTime(time, format) {
      return moment(time, format);
    },
    // 选择品种
    handleChange(tag, checked, selectedTags, val) {
      this[selectedTags] = [tag[val]];
      this.$emit(selectedTags, tag[val]);
    },
    // 选择状态
    orderStatusChange(tag, checked, selectedTags, val) {
      this.selectedStatusTags = [tag[val]];
      let params;
      // 点价订单状态
      let status = orderDict.pricingStatus;
      // 选择已挂单，且是点价订单
      if (
        tag[val] === status.yet.value &&
        (this.$route.name.indexOf("Pricing") !== -1 ||
          this.$route.name.indexOf("pricing") !== -1)
      ) {
        // 已挂单状态传参：[已挂单、申请改价中、申请撤单中、申请结单中]
        params = [
          status.yet.value,
          status.applyModifyPrice.value,
          status.revoke.value,
          status.buyerTally.value
        ];
      } else if (tag[val] === status.waitContract.value) {
        // 选择待生成合同：[待生成合同、修改商品、修改升贴水、卖家申请关闭中、买家申请关闭中]
        params = [
          status.modifyGoods.value,
          status.modifyPremium.value,
          status.sellerClose.value,
          status.buyerClose.value,
          status.waitContract.value
        ];
      } else {
        params = tag[val] === 0 ? undefined : [tag[val]];
      }
      this.$emit("selectedStatusTags", params);
    },
    // 选择日期
    dateChange(date, dateString, type) {
      if (type === "change" && date.length !== 0) return; // 清空时change触发有效，否则只有点击确认按钮触发ok事件
      this.$emit("selectedDate", date);
    }
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  border-radius: 4px;
  position: relative;
  li {
    .label {
      width: 90px;
    }
    .content {
      padding-left: 15px;
    }
    .ant-tag {
      font-size: 14px;
    }
  }
  li:not(:last-child) {
    padding-bottom: 20px;
  }
  .powerSearch {
    position: absolute;
    top: 0;
    right: 0;
    .c-button {
      height: auto;
    }
  }
}
</style>
